'use client'

export default function ContextOverview() {
  const sections = [
    {
      title: 'Regulatory Context',
      content: `The 2020 FTC settlement over prior security claims is a real scar; utilities will demand evidence of a mature security program. The team’s commitment to NIST/CIS-aligned controls and independent audits can convert this from liability to a sales differentiator—provided they produce clean, recent pen-test reports, secure OTA firmware processes, and formal incident response.`
    },
    {
      title: 'Technology & Product Edge',
      content: `Tapplock E advances to BS EN12320 Grade 2, doubles fingerprint capacity, and introduces replaceable batteries with 2–3 year life—aligned with utility expectations. The cloud layer (audit trails, per-user access) is the stickiness driver; defensive IP around biometric padlocks and waterproofing is helpful, though freedom-to-operate versus incumbents must be confirmed.`
    },
    {
      title: 'Distribution & SEA Strategy',
      content: `TNB’s initial deployment with regulator visibility (Energy Commission, MACC) is a powerful regional proof point and can catalyze PLN and other SEA utilities via conference-led evangelism. The opportunity is to get specified into standards and procurement frameworks; the risk is long cycles, political shifts, and incumbent counteroffers.`
    }
  ]

  return (
    <div className=" w-full max-w-6xl mx-auto flex flex-col md:flex-row gap-6 text-gray-300">
      {sections.map((item, i) => (
        <div key={i} className=" flex-1 overview-card p-[16px]">
          <h3 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-3 border-b border-[#2b3142] pb-2">
            {item.title}
          </h3>
          <p className="text-gray-300 text-[15px] leading-relaxed">{item.content}</p>
        </div>
      ))}
    </div>
  )
}
